<template>
  <div class="ai-assistant">
    <!-- 悬浮按钮 -->
    <div class="chat-icon" @click="toggleChat">
      <i class="el-icon-chat-dot-round"></i>
    </div>

    <!-- 对话框 -->
    <el-dialog
      title="AI 助手"
      :visible.sync="dialogVisible"
      width="800px"
      :modal-append-to-body="true"
      custom-class="ai-dialog"
    >
      <div class="chat-container">
        <!-- 消息区域 -->
        <div class="messages" ref="messages">
          <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
            <div class="content">{{ msg.content }}</div>
          </div>
          <div v-if="loading" class="loading">思考中...</div>
        </div>

        <!-- 输入区域 -->
        <div class="input-area">
          <el-input
            v-model="inputMessage"
            placeholder="请输入您的问题..."
            @keyup.enter.native="sendMessage"
          >
            <el-button
              slot="append"
              icon="el-icon-s-promotion"
              @click="sendMessage"
            ></el-button>
          </el-input>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'AiAssistant',
    data() {
      return {
        dialogVisible: false,
        inputMessage: "",
        messages: [],
        loading: false
      };
    },
    methods: {
      toggleChat() {
        this.dialogVisible = !this.dialogVisible;
      },
      async sendMessage() {
    if (!this.inputMessage.trim()) return;

    // 用户消息
    const userMsg = { role: "user", content: this.inputMessage };
    this.messages.push(userMsg);
    this.inputMessage = "";
    this.loading = true;

    try {
      // 调用API
      const response = await fetch("https://api.siliconflow.cn/v1/chat/completions", {
        method: "POST",
        headers: {
          "Authorization": "Bearer sk-pcniokirpeddpsegubfdkdcozgsljmnxmxeeuggrjalnacdz",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          model: "Qwen/QwQ-32B",
          messages: this.messages,
          temperature: 0.7,
          max_tokens: 512
        })
      });

      const data = await response.json();
      if (data.choices && data.choices.length > 0) {
        const aiMsg = {
          role: "assistant",
          content: data.choices[0].message.content
        };
        this.messages.push(aiMsg);
      }
    } catch (error) {
      console.error("API Error:", error);
      this.$message.error("请求失败，请稍后重试");
    } finally {
      this.loading = false;
      this.$nextTick(() => {
        this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight;
    });
    }
  }
  }
  };
</script>

<style lang="scss" scoped>
  .ai-assistant {
    .chat-icon {
      position: fixed;
      right: 40px;
      bottom: 40px;
      width: 50px;
      height: 50px;
      background: #409EFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      transition: all 0.3s;
      z-index: 9999; // 确保悬浮在最顶层

      i {
        color: white;
        font-size: 24px;
      }

      &:hover {
        transform: scale(1.1);
      }
    }

    .chat-container {
      height: 70vh;
      display: flex;
      flex-direction: column;

      .messages {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-bottom: 10px;

        .message {
          margin: 10px 0;
          &.user {
            text-align: right;
            .content {
              background: #409EFF;
              color: white;
            }
          }
          &.assistant {
            text-align: left;
            .content {
              background: #f0f2f5;
            }
          }
          .content {
            display: inline-block;
            max-width: 80%;
            padding: 8px 12px;
            border-radius: 12px;
            word-break: break-word;
          }
        }

        .loading {
          color: #909399;
          font-size: 14px;
          text-align: center;
          padding: 10px;
        }
      }
    }
  }

  // 覆盖对话框样式
  ::v-deep .ai-dialog {
    .el-dialog__body {
      padding: 15px;
    }
  }
</style>
